<template>
  <div class="profiles">
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <h1 class="display-4 text-center">知友群</h1>
          <p class="lead text-center">联通世界!</p>

          <!-- Profile Item -->
          <ProfileItem
            v-for="(profileItem, index) in profiles"
            :key="index"
            :profileItem="profileItem"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import ProfileItem from "./common/profileItem";
export default {
  data() {
    return {};
  },
  components: { ProfileItem },
  created() {
    this.getProfiles();
  },
  computed: {
    profiles() {
      return this.$store.getters.profiles;
    }
  },
  methods: {
    getProfiles() {
      this.$axios
        .get("http://localhost:5000/api/profile/all")
        .then(res => {
          // console.log(res.data);
          this.$store.dispatch("setProfiles", res.data);
        })
        .catch(err => {
          console.log(err.response.data);
        });
    }
  }
};
</script>

<style scoped lang="stylus">
</style>
